<template>
  <view v-if="isShow">
    <view class="uni-im-control-mark" @touchstart="closeMe" @click="closeMe">
    </view>
    <view class="control" :style="{top:data.top,left:data.left,right:data.right}">
      <template v-if="data.msg.msgType == 0">
        <view class="control-item" @click="copyText">
          <!-- <uni-icons custom-prefix="uni-im-font" type="uni-im-copy" size="16" color="#FFF"></uni-icons> -->
          <text class="control-item-text">复制</text>
        </view>
        <view class="control-item" @click="answer">
          <!-- #ifdef H5 -->
          <!-- <uni-icons type="undo" size="18" color="#FFF"></uni-icons> -->
          <!-- #endif -->
          <text class="control-item-text">回复</text>
        </view>
        <view class="control-item" @click="revokeMsg" v-if="canRevoke()">
          <!-- #ifdef H5 -->
          <!-- <uni-icons type="undo" size="18" color="#FFF"></uni-icons> -->
          <!-- #endif -->
          <text class="control-item-text">撤回</text>
        </view>
      </template>
      <view class="control-item" @click="deleteMsg">
        <!-- <uni-icons custom-prefix="uni-im-font" type="uni-im-delete" size="16" color="#FFF"></uni-icons> -->
        <text class="control-item-text">删除</text>
      </view>
      <view class="control-item" @click="other">
        <!-- <uni-icons custom-prefix="uni-im-font" type="uni-im-share" size="16" color="#FFF"></uni-icons> -->
        <text class="control-item-text">转发</text>
      </view>
    </view>
    <!-- #ifdef APP-NVUE -->
    <view class="icon-box" :class="{isInTop:data.isInTop}" :style="{top:data.top}">
      <view class="icon" :style="{right:iconBoxRight,left:iconBoxLeft}"></view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
import uniIm from '@/lib/main.js';

let fn;
export default {
  // #ifdef APP-NVUE
  beforeCreate() {
    // const domModule = uni.requireNativePlugin('dom')
    // domModule.addRule('fontFace', {
    // 	'fontFamily': "uni-im-font",
    // 	'src': "url('https://at.alicdn.com/t/c/font_3726059_lz2adc1jfve.ttf')"
    // });
  },
  // #endif
  data() {
    return {
      isShow: false,
      data: {
        top: '',
        left: '',
        right: '',
        width: '',
        msg: {},
        isInTop: false
      }
    }
  },
  computed: {
    iconBoxLeft() {
      let n = parseInt(this.data.left)
      return n ? n * 3 / 2 + 55 + 'px' : ''
    },
    iconBoxRight() {
      let n = parseInt(this.data.right)
      return n ? n * 3 / 2 + 50 + 'px' : ''
    }
  },
  watch: {
    isShow(isShow) {
      // #ifdef H5
      // 当蒙版弹出，鼠标右键就关闭uni-im-control
      window.addEventListener('contextmenu', (e) => {
        if (fn) {
          fn(e)
        }
      })
      if (isShow) {
        setTimeout(() => {
          fn = (e) => {
            if (this.isShow) {
              if (uniIm.isWidescreen) {
                this.isShow = false
              }
              e.preventDefault()
            }
          }
        }, 0);
      } else {
        fn = false
      }
      // #endif
    }
  },
  mounted() {
    // console.log('this.isShow',this.isShow);
  },
  methods: {
    show(data) {
      this.data = data
      if (data.msg.msgType != 7 && data.msg.msgType != 8) {
        this.isShow = true
      }
    },
    copyText() {
      // console.log('setClipboardData');
      console.log('this.data', this.data);
      uni.setClipboardData({
        data: this.data.msg.content,
        complete: (e) => {
          uni.hideToast()
          console.log(e);
          this.isShow = false
        }
      })
    },
    canRevoke() {
      let current_uid = this.$ws.getSelfUser().id; // this.$ws.getSelfUserId()
      let {groupId, from, conversation, createTime} = this.data.msg || {}
      // console.log('createTime',createTime);
      // console.log('from_uid current_uid',this.data.msg,from_uid,current_uid);

      // 判断是不是群主
      let isGroupAdmin = false
      if (group_id) {
        let conversation = uniIm.conversation.dataList.find(i => i.id == conversation_id)
        isGroupAdmin = conversation.group_info.user_id == current_uid
      }

      // console.log('isGroupAdmin',isGroupAdmin);

      //如果是群主
      if (isGroupAdmin) {
        return true
      } else {
        // 消息发送者为“当前用户”，且时间小于2分钟
        return from == current_uid && (Date.now() - createTime < 1000 * 60 * 2)
      }
    },
    async revokeMsg() {
      // 再判断一遍防止，分钟在2分钟的时候右键了，然后到了第3分钟才点下的情况
      if (this.canRevoke()) {
        await uniIm.conversation.revokeMsg(this.data.msg)
      } else {
        uni.showToast({
          title: '已超过2分钟，不能撤回',
          icon: 'none'
        });
      }
      this.isShow = false
      // console.log('this.data.msg',this.data.msg);
    },
    async answer() {
      // console.log('answer')
      this.$emit('answer', this.data.msgIndex)
      this.isShow = false
    },
    async deleteMsg() {
      // #ifndef H5
      return this.other()
      // #endif
      console.log('---this.data.msg----', this.data.msg);
      // this.data.msg.extras.is_delete = 1;
      // 存到本地
      // let conversation = await uniIm.conversation.get(this.data.msg.conversation_id)
      // conversation.msgManager.localMsg.update(this.data.msg.unique_id,this.data.msg)
      this.$set(this.data.msg.extras, 'isDelete', 1);
      this.$ws.deleteMessage(this.data.msg.id);
      let conversation = await uniIm.conversation.get(this.data.msg.conversation_id)
      conversation.msgManager.localMsg.update(this.data.msg.unique_id,this.data.msg)
      this.isShow = false
    },
    other() {
      uni.showToast({
        title: '暂不支持',
        icon: 'none',
        complete: () => {
          this.isShow = false
        }
      });
    },
    closeMe() {
      setTimeout(() => {
        this.isShow = false
        // console.log('closeMe');
      }, 300)
    }
  }
}
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
view {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* #endif */
.control {
  background-color: #252a30;
  height: 55px;
  // width: 375rpx;
  position: fixed;
  top: 0;
  border-radius: 5px;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  /* #ifndef APP-NVUE */
  z-index: 9999;
  /* #endif */
}

.control-item {
  width: 100rpx;
  justify-content: center;
  align-items: center;
}

.control-item-text {
  font-size: 12px;
  color: #FFFFFF;
  margin-top: 1px;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
}

/* #ifdef H5 */
.control-item-text:hover {
  color: #4CD964;
}

/* #endif */
.uni-im-control-mark {
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  flex: 1;
  height: 9000px;

  /* #ifndef APP-NVUE */
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999;
  /* #endif */

  /* #ifdef H5 */
  max-height: 100vh !important;
  max-width: 100vw !important;
  /* #endif */
  background-color: rgba(0, 0, 0, 0.1);
}

/* #ifdef H5 */
@media screen and (min-width: 960px) {
  .uni-im-control-mark {
    background-color: rgba(255, 255, 255, 0.05);
  }
}

/* #endif */

.icon-box {
  width: 750rpx;
  height: 20px;
  position: fixed;
  transform: translate(0, -10px);
  justify-content: center;
  align-items: center;
  /* #ifndef APP-NVUE */
  z-index: 9999;
  /* #endif */
}

.icon {
  position: absolute;
  background-color: #252a30;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

.isInTop {
  transform: translate(0, 45px);
}
</style>